<template>
    <div class="tabbar">
        <div class="tabbar-list">
            <div class="tabbar-item" :style="{color:(isIndex == index ? active : '#666')}" v-for="(item,index) in TabList" :key="index" @click="onTab(item.to,index)">
                <div class="icon">
                    <i class="iconfont" :class="isIndex == index ? item.activeIcon : item.icon"></i>
                </div>
                <div class="text">{{item.text}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Tabbar',
    props: {
        active: {}
    },
    data() {
        return {
            isIndex:localStorage.getItem("tabIndex") || 0,
            TabList: [
                { text: '首页', to: '/', icon: 'icon-home', activeIcon: 'icon-home-filling' },
                { text: '发布', to: '/release', icon: 'icon-file-common', activeIcon: 'icon-file-common-filling' },
                { text: '收藏', to: '/collect', icon: 'icon-favorite', activeIcon: 'icon-favorite-filling' },
                { text: '我的', to: '/mine', icon: 'icon-user', activeIcon: 'icon-user-filling' }
            ]
        }
    },
    methods: {
        onTab(to,index) {
            if(this.$route.path != to) {
                this.$store.commit('setAnimate','')
                localStorage.setItem("tabIndex",index)
                this.isIndex = index
                this.$router.push(to)
            }
        }
    },
    watch: {
        $route: {
            handler(e) {
                switch(e.path) {
                    case '/' :
                        this.isIndex = 0
                        break
                    case '/release' :
                        this.isIndex = 1
                        break
                    case '/collect' :
                        this.isIndex = 2
                        break
                    case '/mine' :
                        this.isIndex = 3
                        break
                    default :
                        break
                }
            }
        }
    }
}
</script>

<style scoped>
.tabbar .tabbar-list{
    position: fixed;
    z-index:1;
    bottom:0;
    left:0;
    width:100%;
    height:1rem;
    border-top:1px solid #eee;
    display: flex;
    background:#fff;
}
.tabbar .tabbar-list .tabbar-item{
    position: relative;
    text-align: center;
    line-height:1;
    color:#666;
    flex: 1;
}
.tabbar .tabbar-list .tabbar-item::before{
    content: "";
    position: absolute;
    top:0.2rem;
    left:0.6rem;
    bottom:0.2rem;
    right:0.6rem;
    border-radius:100%;
    background:#000;
    opacity:0;
    transition:all 0.2s;
}
.tabbar .tabbar-list .tabbar-item:active::before{
    top:0;
    left:0.4rem;
    bottom:0;
    right:0.4rem;
    opacity:0.1;
}
.tabbar .tabbar-list .tabbar-item .icon{
    position: relative;
    height:0.44rem;
    line-height:0.3;
    margin-bottom: 4px;
}
.tabbar .tabbar-list .tabbar-item .icon .iconfont{
    font-size:0.44rem;
}
.tabbar .tabbar-list .tabbar-item .text{
    font-size:0.24rem;
    margin-top:8px;
}
</style>